<!--
 * @Author: linjituan linjituan@revolution.com
 * @Date: 2024-10-14 01:55:12
 * @LastEditors: linjituan linjituan@revolution.com
 * @LastEditTime: 2024-10-15 12:44:09
 * @FilePath: \hm-twx-admin\src\components\WbMenus\src\WbMenus.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="item-wrap">
    <div class="item-cell hover" @click="$router.push('/home')" :class="{ active: route.path === '/home' }">
      Home
    </div>
    <div class="item-cell hover" @click="$router.push('/posts')" :class="{ active: route.path === '/posts' }">
      Posts
    </div>
    <div class="item-cell">
      <div class="btn">Connect Wallet</div>
    </div>
  </div>
</template>

<script  lang="ts" setup>
import { useRoute } from "vue-router";
const route = useRoute();
</script>

<style lang="less" scoped>
.item-wrap {
  float: right;
  padding: 40px;
  font-size: 16px;
  color: #fff;

  .item-cell {
    padding: 10px 0;
    margin: 10px;
    text-align: center;
    cursor: pointer;
    border-radius: 40px;

    &.active {
      color: #00b1ff;
    }

    &.hover:hover {
      background: rgb(102 102 102 / 22.6%);
    }

    .btn {
      padding: 10px;
      background: #00b1ff;
      border-radius: 40px;
    }
  }
}
</style>